<template>
    <div id="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-title" class="popup-title"></div>
            <div id="popup-content" class="popup-content"></div>
        </div>
    </div>
</template>

<script>
    import {Map, Overlay, View} from 'ol'
    import {OSM} from 'ol/source';
    import {Tile as TileLayer} from 'ol/layer';
    import {toStringHDMS} from 'ol/coordinate';
    import {transform} from "ol/proj";

    export default {
        name: "PopupWindow",
        data() {
            return {
                position: "",
                altitude: "",
                altitudeAccuracy: "",
                heading: "",
                speed: "",
            }
        },
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });
            //初始化气泡窗
            this.initPopup();
        },
        methods: {
            initPopup(){
                let container = document.getElementById('popup');
                let content = document.getElementById('popup-content');
                let title = document.getElementById('popup-title');
                let closer = document.getElementById('popup-closer');

                //构建一个覆盖标注
                let overlay = new Overlay({
                    element: container,//将最外面的div容器放在覆盖标注中
                    autoPan: {
                        animation: {
                            duration: 250,//拖动动画的效果
                        },
                    },
                });
                //添加标注
                this.map.addOverlay(overlay);

                //关闭dom的点击事件
                closer.onclick = function () {
                    //容器隐藏
                    container.style.display = 'none';
                    //覆盖标注的位置未定义
                    overlay.setPosition(undefined);
                    //关闭dom失去焦点
                    closer.blur();
                    return false;
                };

                //map添加单击事件
                this.map.on('singleclick', (evt) => {
                    let coordinate = evt.coordinate;//单击事件的坐标
                    console.log(coordinate)
                    let hdms = toStringHDMS(coordinate);//将坐标转成hdms格式字符串
                    overlay.setPosition(coordinate);//设置覆盖标注位置
                    //内容容器添加html形式的内容
                    content.innerHTML = '<p>当前位置:</p><code>' + hdms + '</code>';
                    //主容器显示出来
                    container.style.display = 'block';
                    //标题容器赋值，并且显示出来
                    title.innerHTML = "提示信息";
                    title.style.display = 'block';
                    //将视口的中心位置设置为鼠标点击的位置
                    this.map.getView().setCenter(coordinate);
                });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
    }

    .ol-popup-closer:after {
        content: "✖";
    }
</style>
